{% extends "admin/layout.html" %}

{% block head %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0"><i class="fas fa-users me-2"></i>用户管理</h2>
                <a href="{{ url_for('admin.admin_user.add_user') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i> 添加用户
                </a>
            </div>
            <hr>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-white">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="mb-0">用户列表</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <label for="searchInput" class="visually-hidden">搜索用户</label>
                                <input type="text" class="form-control" placeholder="搜索用户..." id="searchInput" aria-label="搜索用户">
                                <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {% if users %}
                    <div class="table-responsive">
                        <table class="table table-hover" id="userTable" aria-describedby="userListDesc">
                            <thead>
                                <tr>
                                    <th scope="col">用户名</th>
                                    <th scope="col">真实姓名</th>
                                    <th scope="col">超级管理员</th>
                                    <th scope="col">创建时间</th>
                                    <th scope="col">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in users %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                            <img src="{{ user.avatar or '/static/nopic.jpg' }}"
                                                 class="rounded-circle" width="40" height="40"
                                                 alt="{{ user.username }}的头像">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                {{ user.username }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ user.real_name or '未设置' }}</td>
                                    <td>{{ user.member.name if user.member else '未关联' }}</td>
                                    <td>
                                        {% if user.is_super %}
                                        <span class="badge bg-warning">是</span>
                                        {% else %}
                                        <span class="badge bg-secondary">否</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ user.create_time.strftime('%Y-%m-%d') }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ url_for('admin.admin_user.edit_user', id=user.id) }}"
                                               class="btn btn-outline-primary"
                                               aria-label="编辑用户">编辑</a>
                                            <a href="{{ url_for('admin.admin_user.delete_user', id=user.id) }}"
                                               class="btn btn-outline-danger"
                                               data-confirm="确定要删除此用户吗？"
                                               aria-label="删除用户">删除</a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-users fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无用户数据</p>
                        <a href="{{ url_for('admin.admin_user.add_user') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> 添加用户
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');
        const userTable = document.getElementById('userTable');

        if (searchInput && searchButton && userTable) {
            searchButton.addEventListener('click', function() {
                const searchText = searchInput.value.toLowerCase();
                const rows = userTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i];
                    const username = row.cells[0].textContent.toLowerCase();
                    const realname = row.cells[1].textContent.toLowerCase();
                    const member = row.cells[2].textContent.toLowerCase();

                    if (username.includes(searchText) || realname.includes(searchText) || member.includes(searchText)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });

            // 回车键搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchButton.click();
                }
            });
        }
    });
</script>
{% endblock %}